﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title></title>
<!--[if lt IE 9]>
<?import namespace="v" implementation="#default#VML" ?>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/GooFlow.css"/>

<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--悬停展示提示框用的js	-->
<script type="text/javascript" src="js/GooFunc.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" src="js/GooFlow.js"></script>

	<!--导出图依赖的js-->
<!--<script type="text/javascript" src="js/promise.min.js"></script>-->
<script type="text/javascript" src="js/html2canvas.min.js"></script>
<!--[if lte IE 11]-->
<script type="text/javascript" src="js/canvg.js"></script>
<!--[endif]-->
<script type="text/javascript" src="js/GooFlow.export.js"></script>

<script type="text/javascript">

	var property={
	width:$(window).width()-30,
	height:$(window).height()-20,
	toolBtns:["task","phone","card","qq","weChat","webUrl"],
	haveHead:true,
	headBtns:["undo","redo","scale","enlarge","print"],//如果haveHead=true，则定义HEAD区的按钮
	haveTool:true,
	haveGroup:true,
	useOperStack:true
};
var remark={
	cursor:"选择指针",
	direct:"转换连线",
	start:"开始结点",
	"end round":"结束结点",
	"task round":"任务结点",
	node:"自动结点",
	task:"添加人物节点",
	chat:"添加节点",
	phone:"添加电话节点",
	card:"添加银行卡节点",
	qq:"添加QQ节点",
	weChat:"添加微信节点",
	webUrl:"添加网址节点",
	state:"状态结点",
	plug:"附加插件",
	fork:"分支结点",
	"join":"联合结点",
	"complex":"重要节点",
	"group":"编辑划分框"
};
var demo;
$(document).ready(function(){
	demo=$.createGooFlow($("#demo"),property);
	demo.setNodeRemarks(remark);
	demo.onItemDel=function(id,type){
		$('#spul').remove();
		return confirm("确定要删除吗?");
	}
	demo.loadData(jsondata);
	demo.onPrintClick=function(){demo.exportDiagram("导出图片");}
	//导出图片功能 END
});
var out;

function Export(){
    document.getElementById("result").value=JSON.stringify(demo.exportData());
}


//展示栏里面的li的点击事件
function licon(a,b){
	$('#spul').remove();
	console.log('点击项的id为:'+b+' 点击的功能是:'+$(a).text());
}

//顶部工具栏的放大缩小按钮
$(function () {
	$('.ico_scale').click(function(){
//		newFlowInnerScale获取的是页面GooFlow_work_inner的缩放大小值
		var newFlowInnerScale=$('.GooFlow_work_inner').css('transform').substring(7).split(',')[0]-0.1;
		newFlowInnerScale<=0?newFlowInnerScale=0:newFlowInnerScale;
//		console.log(newFlowInnerScale);
		$('.GooFlow_work_inner').css('transform','scale('+(newFlowInnerScale)+')');
	})
	$('.ico_enlarge').click(function(){
//		newFlowInnerEnlarge获取的是页面GooFlow_work_inner的缩放大小值
		var newFlowInnerEnlarge=Number($('.GooFlow_work_inner').css('transform').substring(7).split(',')[0])+0.1;
		newFlowInnerEnlarge>=1?newFlowInnerEnlarge=1:newFlowInnerEnlarge;
//		console.log(newFlowInnerEnlarge);
		$('.GooFlow_work_inner').css('transform','scale('+(newFlowInnerEnlarge)+')');
	})

})

//展示框的显示和关闭
function closeZsk(a){
	$(a).parents('#jyxxZsk').fadeOut(500);
}

	
</script>
</head>
<body>
<div id="demo" style="margin:10px"></div>
<input id="submit" type="button" value='导出结果' onclick="Export()"/>
<textarea id="result" row="6"></textarea>
<!--简要信息的展示内容框-->
<div id="jyxxZsk" class="">
	<div class="main-innerTitle3">
		<div class="main-innerTitleLeft fl">
			<img src="images/jbxx.png" alt=""><span>简要信息</span>
		</div>

		<div class="main-innerTitleRight fr">
			<img onclick="closeZsk(this)" src="images/closeBtn.png" alt="关闭"/>
		</div>
	</div>
	<!--放展示内容的table-->
	<table class="darkBlueTable">
		<tbody>
			<tr>
				<td style="width: 40%;" class="keyTd">人员编号</td>
				<td style="width: 60%;" class="valueTd">K4201215487898784</td>
			</tr>
			<tr>
				<td class="keyTd">案(事)件受理号</td>
				<td class="valueTd">J420154878784654321</td>
			</tr>
			<tr>
				<td class="keyTd">案件类别</td>
				<td class="valueTd">盗窃案</td>
			</tr>
			<tr>
				<td class="keyTd">是否命案</td>
				<td class="valueTd">否</td>
			</tr>
			<tr>
				<td class="keyTd">是否涉保险柜</td>
				<td class="valueTd">否</td>
			</tr>
			<tr>
				<td class="keyTd">涉案金额</td>
				<td class="valueTd">8888元</td>
			</tr>
			<tr>
				<td class="keyTd">发案地区划</td>
				<td class="valueTd">武汉市江岸区塔子湖</td>
			</tr>

		</tbody>
	</table>
</div>
<!--放展示关联信息的div-->
<div id="glxxZsk">

</div>

</body>
</html>
